<template>
	<view class="content">
		<!-- 我的订单 -->
		<view class="topImg">
			<image
				src="https://tenfei04.cfp.cn/creative/vcg/veer/612/veer-316610198.jpg?x-oss-process=image/format,webp"
				mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="nav">
				<view :class="['option',option == 0 ? 'activate':'' ]" @click="changeOption(0)">
					门票订单
				</view>
				<view :class="['option',option == 1 ? 'activate':'' ]" @click="changeOption(1)">
					酒店订单
				</view>
			</view>
			<view class="orderList">
				<block v-for="item in ticketList" :key="item.id" v-if="option == 0">
					<view class="item">
						<view class="i_left">
							<text v-if="item.type == '0'">
								成
								人
								票
							</text>
							<text v-if="item.type == '1'">
								儿
								童
								票
							</text>
						</view>
						<view class="i_right">
							<text>中国千年银杏谷\n</text>
							<text class="date">{{item.date}}</text>
							<view class="i_right_top">
								<view>电子票 x{{item.num}}</view>
								<view class="btn" @click="useTicket(item.id)">查看二维码</view>
							</view>
						</view>
					</view>
				</block>
				<block v-for="item in hotelList" :key="item.id" v-if="option == 1">
					<view class="item2">
						<view class="top">
							<view class="img">
								<image :src="item.imgUrl" mode=""></image>
							</view>
							<view class="t_content">
								<view class="hoteName">
									{{item.hoteName}}
								</view>
								<view class="msg">
									<text>{{item.roomName}}</text>
									<text>-{{item.activity}}\n</text>
									<text>{{item.num}}间{{item.day}}晚\n</text>
									<text>入住时间：{{item.checkInDate}}-{{item.leaveDate}}</text>
								</view>
							</view>
						</view>
						<view class="buttom">
							<view class="totalPrice">
								<text>合计</text>
								<text class="num">￥{{item.price * item.num * item.day}}\n</text>
								<view class="btn">
									删除订单
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	// import {sqlTimeToDate,toMonthDay,getDistanceDays} from '@/utils/commonMethods.js'
	export default {
		data() {
			return {
				option: 0, //0门票1酒店
				ticketList: [ //门票数据
					{
						id: 1,
						type: '0', //0表示成人1表示儿童
						date: '2022-06-29',
						num: 1
					},
					{
						id: 2,
						type: '1', //0表示成人1表示儿童
						date: '2022-07-01',
						num: 5
					},
					{
						id: 3,
						type: '1', //0表示成人1表示儿童
						date: '2022-07-01',
						num: 5
					},
				],
				hotelList: [ //酒店订单数据
					{
						id: 1,
						imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.05175e5e75bf5c9baa018c0753e35aa3?rik=ouxseZdIvSgdyw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50042%2f0412.jpg_wh1200.jpg&ehk=%2b8KJSqynFjaje4TpM028wSlthyw%2buhVifnjd1zyzx0I%3d&risl=&pid=ImgRaw&r=0',
						hoteName: '千年银杏谷烽火客栈', //酒店名
						roomName: '标准大床房', //房间名
						activity: '黄金季特惠5折无早', //活动
						num: 1, //房间数量
						day: 1, //入住天数
						checkInDate: '10月21日', //入住事件
						leaveDate: '10月22日', //离店时间
						price: 109 //总价
					},
					{
						id: 2,
						imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.05175e5e75bf5c9baa018c0753e35aa3?rik=ouxseZdIvSgdyw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50042%2f0412.jpg_wh1200.jpg&ehk=%2b8KJSqynFjaje4TpM028wSlthyw%2buhVifnjd1zyzx0I%3d&risl=&pid=ImgRaw&r=0',
						hoteName: '千年银杏谷烽火客栈', //酒店名
						roomName: '标准大床房', //房间名
						activity: '黄金季特惠5折无早', //活动
						num: 1, //房间数量
						day: 1, //入住天数
						checkInDate: '10月23日', //入住事件
						leaveDate: '10月24日', //离店时间
						price: 109 //总价
					}
				]
			}
		},
		methods: {
			changeOption(num) {
				if (num != this.option) {
					this.option = num
					if (num) { //获取酒店订单信息
						this.getHotelList()
					} else { //获取门票订单信息
						this.getTicketList()
					}
					
				}
			},
			async useTicket(id){	//使用门票
			console.log('接收的id',id);
				let res = await this.$http({
					url: '/useTicket',
					method:'post',
					data: {
						id
					}
				})
				if(res && res.data.code == 200){
					console.log('门票使用结果',res);
					uni.showToast({
						title: '门票使用成功',
						duration: 1000
					});
					this.getTicketList()
				}
			},
			async getTicketList() { //获取当前用户门票订单信息
				let res = await this.$http({
					url: '/getTicketOrder',
					data: {
						userId: 'adsfgfhjhkl'
					}
				})
				console.log('获取门票订单结果', res);
				if (res && res.data.code == 200) {
					let newArr = res.data.data.map(item => { //处理数据
						return {
							id: item.id,
							type: item.type,
							date: item.date.slice(0, 10),
							num: item.num
						}
					})
					this.ticketList = newArr
				}

			},
			async getHotelList() {		//获取当前用酒店票订单信息
				let res = await this.$http({
					url: '/getHotelOrder',
					data: {
						userId: 'adsfgfhjhkl'
					}
				})
				
				if (res && res.data.code == 200) { //处理数据
					console.log('获取酒店订单结果', res);
					let newArr = res.data.data.map(item => {
						return {
							id: item.id,
							imgUrl: item.img,
							hoteName: item.hoteName, //酒店名
							roomName: item.roomName, //房间名
							activity: item.activityName, //活动
							num: item.num, //房间数量
							day: getDistanceDays(sqlTimeToDate(item.checkInDate),sqlTimeToDate(item.leaveDate)), //入住天数
							checkInDate: toMonthDay(sqlTimeToDate(item.checkInDate)), //入住时间
							leaveDate: toMonthDay(sqlTimeToDate(item.leaveDate)), //离店时间
							price: 109 ,//单价
							
						}
					})
					console.log('处理后的酒店订单数据', newArr);
					this.hotelList = newArr
				}
			}
		},
		onShow() {
			this.getTicketList()
		}
	}
	let sqlTimeToDate = time => {	//sql时间取年月日
		return time.slice(0,10)
	}
	let sqlTimeToTime = tiem => {	//sql时间取时分秒
		return time.slice(11,19)
	}
	
	let toMonthDay = date => {	//2022-06-01 转 06月01日	
		return date.slice(5,7) + '月' + date.slice(8) + '日'
	}
	 
	let toTimeStamp = dateString => { // 指定时间转换为时间戳
	  // dateString例如:'2022-03-05'
	  // 例如返回:1646611200000
		return new Date(dateString) - 0
	}
	
	let getDistanceDays = (date1,date2) => { // 计算两个日期距离的天数
	  // date1例如:'2022-03-05',date2例如:'2022-03-06'
	  const date1_timeStamp = toTimeStamp(date1)
	  const date2_timeStamp = toTimeStamp(date2)
	  let max = '', min = ''
	  if(date1_timeStamp>date2_timeStamp){
	    max = date1_timeStamp
	    min = date2_timeStamp
	  }else{
	    max = date2_timeStamp
	    min = date1_timeStamp
	  }
	 // 例如返回:'1'
	 return (max-min)/(24*60*60*1000)
	}
</script>

<style lang="less">
	@radius: 16rpx; //圆角
	@h1: 36rpx; //大标题
	@h2: 32rpx; //二级标题
	@h3: 28rpx; //三级标题
	@text: 24rpx; //四级标题、标签、说明文字
	//颜色
	@color1: #C78748;
	@color2: #FFBF81;
	@color3: #673A19;
	@color4: #42BAE7;
	@color5: #5D9319;
	@color6: #E0593B;
	@color7: #FFF9EF;
	//间距
	@interval1: 72rpx;
	@interval2: 48rpx;
	@interval3: 32rpx;
	@interval4: 16rpx;
	@shadow: 0 0 8rpx 8rpx #DDDDDD33;

	.content {
		font-size: @h3;
		background-color: @color7;
		justify-content: start;
		align-items: flex-start;
		padding-bottom: 100rpx;
	}

	.topImg {
		height: 300rpx;
		width: 750rpx;
		overflow: hidden;
		position: relative;

		image {
			width: 750rpx;
		}

		&::before {
			content: '';
			display: block;
			width: 750rpx;
			height: @radius;
			background-color: @color7;
			border-radius: @radius @radius 0 0;
			position: absolute;
			bottom: 0;
		}
	}

	.main {
		padding: @interval3;
		width: 686rpx;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		margin-bottom: @interval2;

		.option {
			position: relative;
			font-size: @h2;
			color: #666;
		}

		.activate:before {
			color: #000;
			content: '';
			display: inline-block;
			height: 5rpx;
			width: 2.2em;
			border-radius: 3rpx;
			background-color: #000;
			position: absolute;
			bottom: -.5em;
			left: 50%;
			transform: translate(-50%);
		}
	}

	.item {
		background-color: @color2;
		display: flex;
		margin-bottom: @interval3;
		padding: @interval3 0;
		color: #FFF;
		box-sizing: border-box;
		box-shadow: @shadow;

		.i_left {
			position: relative;
			flex: 1;
			text-align: center;
			padding-top: 40rpx;
			border-right: 1rpx #FFF dashed;
		}

		.i_right {
			flex: 5;
			padding: 0 @interval3;

			.date {
				line-height: 2;
				font-size: @text;
			}
		}

		.i_left::before,
		.i_left::after {
			content: '';
			display: inline-block;
			width: 1em;
			height: 1em;
			background-color: @color7;
			border-radius: 50%;
			position: absolute;
			right: -.5em;
		}

		.i_left::before {
			top: -1.5em;
		}

		.i_left::after {
			bottom: -1.5em;
		}

		.i_right_top {
			line-height: 40rpx;
			font-size: @text;
			margin-top: @interval1;
			display: flex;
			justify-content: space-between;
		}

		.btn {
			height: 40rpx;
			border: 1rpx solid #FFF;
			padding: 0 1em;
			border-radius: 20rpx;
		}
	}

	.item2 {
		background-color: #FFF;
		padding: @interval3 @interval3 @interval4;
		border-radius: @radius;
		box-shadow: @shadow;
		margin-bottom: @interval3;

		.img {
			font-size: 0;
			border-radius: @radius;
			margin-right: @interval3;
			overflow: hidden;

			image {
				height: 180rpx;
				width: 180rpx;
			}
		}

		.top {
			display: flex;
		}

		.t_content {
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.msg {
				font-size: @text;
				color: #666;
			}
		}

		.buttom {
			// display: inline-block;
			font-size: @text;
			text-align: right;

			.num {
				font-size: @h2;
			}

			.totalPrice {
				text-align: center;
				margin-top: @interval3;
			}

			.btn {
				line-height: 40rpx;
				padding: 0 1em;
				border-radius: 20rpx;
				border: #000 1rpx solid;
				text-align: right;
				display: inline-block;
				margin-top: @interval4;
			}

			&>view {
				display: inline-block;
			}
		}
	}
</style>
